<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  子组件向父组件传递参数:
   @gettotal  自定义事件    将gettotal传递到子组件中
-->

<div id="app">
    <h3>学生总数为:{{number}}</h3>
    <student-info  @gettotal="getTotal"></student-info>
</div>

<script>

    const studentInfo = {
        template:`
              <div>
                  <ul v-for="student in students">
                     <li>name:{{student.name}}</li>
                     <li>age:{{student.age}}</li>
                     <li>sex:{{student.sex}}</li>
                    <hr>
                  </ul>
                 <button @click="total">统计学生总数</button>
              </div>
        `,
        props:['gettotal'],
        data(){
            return{
                students: [
                    {
                        name:'小明1',
                        age:30,
                        sex:'男'
                    },
                    {
                        name:'小明1',
                        age:30,
                        sex:'男'
                    },
                    {
                        name:'小明1',
                        age:30,
                        sex:'男'
                    },
                    {
                        name:'小明1',
                        age:30,
                        sex:'男'
                    },{
                        name:'小明2',
                        age:32,
                        sex:'男'
                    },{
                        name:'小明3',
                        age:33,
                        sex:'男'
                    }
                ]
            }
        },
        methods: {
            total(){
                // 在子组件中如何调用父组件传递的函数
                this.$emit('gettotal',this.students.length)
            }
        }
    }


    let vm = new Vue({
        el:'#app',
        data:{
            number:'等待统计....'
        },
        methods:{
            getTotal(number){
                this.number = number
            }
        },
        components:{
            "student-info":studentInfo
        }
      })
</script>
</body>
</html>